<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script language="JavaScript" src="${staticPath}front/js/jquery-1.8.1.min.js"></script>
    <style type="text/css">
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            overflow: hidden;
            padding: 20px;
            box-sizing: border-box;
        }
        .container h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        .form-group input[type="submit"] {
            background-color: palevioletred;
            color: white;
            cursor: pointer;
        }
        .form-group input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>欢迎登录</h2>
        <form id="signupForm" method="post">
            <div class="form-group">
                <label for="username">手机号:</label>
                <input type="text" name="mobile" id="mobile" placeholder="请输入手机号" required>
            </div>
            <div class="form-group">
                <label for="password">验证码:</label>
                <input type="text" name="code" class="loginCode" placeholder="请输入验证码" required style="width: 80px;">
                <input type="button" name="getYzm" id="btn" value="发送短信验证码"  onclick="sendMobile()" style="width: 130px;"/>
            </div>
            <div class="form-group">
                <input type="submit" value="登录" onmousedown="login();">
            </div>
        </form>
    </div>
</div>



</body>
<script>
    function login(){
        jQuery.post("${basePath}loginValidate", $("#signupForm").serializeArray(),function(result){
            if(result.success){
                <#if RequestParameters['lastpage']??>
                document.location.href="${RequestParameters['lastpage']}";
                <#else>
                document.location.href='${basePath}home/index';
                </#if>
            }else {
                alert(result.msg);
                $('#loginBtn').attr("disabled",false);
            }
        });
    }
    function refreshCode() {
        $('#validCode').val('');
        $('#vcode').attr('src','${basePath}getPicCode');
    }
    $(document).keyup(function(event){
        if(event.keyCode ==13){
            login();
        }
    });

    var countdown=60;
    function sendMobile(){
        if($('#mobile').val()==''){
            Bootstap.alert('请输入手机号');
            return;
        }
        var obj = $("#btn");
        jQuery.post("${basePath}getCode", {'mobile':$('#mobile').val()},function(result){
            if(result.success){
                settime(obj);
            }else {
                Bootstap.alert(result.msg);
            }
        });
    }
    function settime(obj) { //发送验证码倒计时
        if (countdown == 0) {
            obj.attr('disabled',false);
            obj.val("获取验证码");
            countdown = 60;
            return;
        } else {
            obj.attr('disabled',true);
            obj.val("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function() { settime(obj) },1000)
    }
</script>
</html>


